<template>
  <div class="text-orange-500">123</div>
  <n-button type="primary" @click="test">Primary</n-button>
  <div class="dark-switch">
    <n-tooltip placement="bottom">
      <template #trigger>
        <n-switch v-model:value="isDarkTheme" @update:value="changeTheme">
          <template #unchecked>
            <n-icon size="14" color="#ffd93b">
              <SunnySharp />
            </n-icon>
          </template>
          <template #checked>
            <n-icon size="14" color="#ffd93b">
              <Moon />
            </n-icon>
          </template>
        </n-switch>
      </template>
      <span>{{ isDarkTheme ? '深色模式' : '浅色模式' }}</span>
    </n-tooltip>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { Moon, SunnySharp } from '@vicons/ionicons5'
import { useAppStore } from '@/stores'

const router = useRouter()
const appStore = useAppStore()

const test = () => {
  router.push({ path: '/index' })
}

const { theme } = storeToRefs(appStore)

const isDarkTheme = ref(theme.value === 'dark' ? true : false)

const changeTheme = (isDark: boolean) => {
  appStore.changeTheme(isDark ? 'dark' : 'light')
}
</script>

<style lang="scss" scoped>
.dark-switch .n-switch {
  ::v-deep(.n-switch__rail) {
    background-color: #000e1c;
  }
}
</style>
